初次碰CSS Animation是為了做出某動畫要求，然後饅頭對我說，以後JS有點什麼了，也盡可能用CSS實作動畫啊，當下的我想說，為傻？JS動畫庫這麼多，為何還要用很晚才出來的CSS Animation。他回我說，『因為CSS執行動畫的效率遠超過你自己寫的JS，控制用JS，但設定動畫都是用CSS』喔喔，原來如此啊～接下來要用 W3C CSS Animations Level 1處在第二階段working draft，搭配MDN來探索一下。

初次做動畫紀錄

轉成.gif跑起來，有點緩慢卡頓，請見諒，有沒有好心人推薦一下.mov轉.gif好用免費工具

• 流向方向不同（左右方向）grid也不同佈局。
• 相同畫面一組（三張圖片），要連續不斷。圖片當時是用假圖來填充。
• 中間有做停頓，速度由快轉緩，停頓，重新循環Ｎ次
  

• 在devtools可見時間速度調配

用 CSS Animation的好處

MDN Using CSS animations

There are three key advantages to CSS animations over traditional script-driven animation techniques:

1. They're easy to use for simple animations; you can create them without even having to know JavaScript.
2. The animations run well, even under moderate system load.
   Simple animations can often perform poorly in JavaScript. The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.

以上可得知，與傳統腳本驅動動畫（traditional script-driven animation）相比，CSS 動畫幾個關鍵優勢：

1. 容易用於簡單動畫；不需要了解 JavaScript 就可以做動畫效果。
2. 即使在緩慢系統負載下(moderate system load)，動畫也運作良好。
3. 簡單動畫在 JavaScript 中通常表現不佳（often perform poorly）。
4. 渲染引擎可以使用跳幀（frame-skipping）和其他技術來保持效能盡可能流暢。
5. 讓瀏覽器控制動畫序列(animation sequence)，可以讓瀏覽器『優化效能和效率』，例如：減少目前不可見的標籤中運行的動畫的更新頻率。

This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes.
The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.

在Ｗ3C前言部分，便說道，這是一種方法！

• 使用『關鍵影格』(keyframes)，隨時間對 CSS 屬性值，進行動畫處理。
• 這些『關鍵影格動畫』的行為，可以透過指定『持續時間』、『重複次數」和『重複行為』來控制。

Ｗ3C 目錄結構

1. Introduction 介紹
2. Animations 動畫
3. Keyframes 關鍵影格
4. Animation Events 動畫事件
5. DOM Interfaces DOM 介面
6. Privacy Considerations 隱私考慮因素
7. Security Considerations 安全考慮
8. Changes 變化
9. Acknowledgements 致謝
10. Other open issues 其他未解問題
11. Working Group Resolutions that are pending editing 待決議

章節簡介摘要

第一章，Introduction介紹

介紹了關於 CSS 動畫(Animations)，以及相對於 CSS 過渡(Transitions)的不同之處。

• 動畫與過渡類似，因為它們隨著時間改變CSS屬性的展示值。
• 主要的區別在於，過渡在屬性值變化時自動觸發，而動畫則在應用動畫屬性時明確執行。因此，動畫需要明確指定要動畫化的屬性的值。這些值是使用下面描述的動畫關鍵幀來指定的。
• 不同之處：
  相對於過渡，允許更精細的定義 CSS 屬性值隨時間變化的方式，以創造更具交互性和視覺吸引力的網頁動畫效果。簡單來說，動畫可以控制的要素更多，透過『關鍵影格』(keyframes)來做控制。

第二章，Animations動畫

說明CSS動畫的工作原理和相關規則，包括如何應用、覆蓋和更新動畫，以及動畫的生命週期和影響等，以下摘要些重點，有機會在寫個篇幅研究研究ＱＡＱ～

• CSS動畫會影響計算屬性值，這是通過將指定值添加到CSS聯級中，來實現的，以便為當前動畫狀態生成正確的計算值。動畫會覆蓋所有普通規則，但會被!important規則覆蓋。
• 如果在某個時間點有多個動畫為同一屬性指定行為，則animation-name值中『後出』現的動畫將在該點『覆蓋』其他動畫。
• 動畫不會影響應用動畫之前或之後的計算值，但可能根據animation-fill-mode屬性的設置影響。
• 在動畫應用但尚未完成或已完成但animation-fill-mode為forwards或both時，使用者代理必須假定元素的will-change屬性還包括由動畫動畫化的所有屬性。
• 動畫的開始時間，是應用動畫的樣式和相應的@keyframes規則都被解析的時間，如果無法解析匹配的@keyframes規則，動畫將等待開始。
• 動畫適用於元素，如果其名稱出現在animation-name屬性的計算值中，並且使用有效的@keyframes規則。動畫持續到結束或animation-name被移除
• 變更animation-name會更新現有動畫，找到最後一個匹配的動畫，如果找不到匹配，則創建新的動畫。

第三章，Keyframes關鍵影格

這章則是關於CSS動畫中的關鍵幀（Keyframes），用於在動畫的不同時間點指定屬性的值，定義了動畫一個循環的行為，動畫可以重複零次或多次。以下簡介摘要內容，有機會在來研究細節ＱㄇＱ～

• 關鍵幀使用@keyframes at-rule 來定義，其語法如下：
  • @keyframes = @keyframes <keyframes-name> { <rule-list> }
  • <keyframes-name> = <custom-ident> | <string>
  • <keyframe-block> = <keyframe-selector># { <declaration-list> }
  • <keyframe-selector> = from | to | <percentage \[0,100\]>
• @keyframes區塊中的<rule-list>只能包含<keyframe-block>規則。
• 在<keyframe-block>內的<declaration-list>接受除了本規範中定義的屬性之外的任何CSS屬性。但會特殊處理animation-timing-function屬性。
• 如果多個@keyframes規則具有相同的名稱，則按照文檔順序，最後出現的規則將優先，之前的將被忽略。
• <keyframe-selector>用於指定關鍵幀在動畫期間所代表的百分比。from相當於0%，to相當於100%。小於0%或大於100%的值是無效的並將導致忽略<keyframe-block>。
• 如果未指定0%或from關鍵幀，則使用被動畫化屬性的計算值構建0%關鍵幀。如果未指定100%或to關鍵幀，則使用被動畫化屬性的計算值構建100%關鍵幀。
• <keyframe-block>包含屬性和值。除了animation-timing-function以外，本規範定義的屬性在這些規則中被忽略。並且，帶有!important的屬性是無效的並被忽略。
• 如果多個@keyframes規則具有相同的名稱，最後一個將優先並且之前的將被忽略。

第四章，Animation Events動畫事件

本章介紹與CSS動畫相關的事件，這些事件可以透過DOM事件系統來使用。在CSS動畫中，可以通過DOM事件系統來監聽和處理與動畫相關的事件，並且這些事件提供了有關動畫的有用信息，如開始、結束以及動畫的進度。以下簡介摘要內容，有機會在來研究細節ＱＡＱ～

• 事件類型，CSS動畫生成幾種不同的DOM事件，包括動畫的開始、結束以及每次迭代結束時都會生成事件。
• 多個屬性動畫，一個元素可以同時有多個屬性進行動畫。這可以通過使用單個animation-name值並在關鍵幀中包含多個屬性，或者使用多個animation-name值來實現。然而，就事件而言，每個animation-name指定一個單獨的動畫。因此，每個animation-name值都會生成一個事件，而不一定是每個被動畫化的屬性都會生成事件。
• 事件觸發，只要有一個有效的關鍵幀規則被定義，任何動畫都將運行並生成事件，即使該動畫具有空的關鍵幀規則也是如此。
• 動畫時間，每個生成的事件都會攜帶動畫已運行的時間，允許事件處理程序確定循環動畫的當前，迭代或交替動畫的當前位置，但不包括動畫處於暫停播放狀態的時間。

第五章，DOM Interfaces DOM 介面

本章介紹，在DOM中如何使用這些介面和事件處理程序來操作和處理與CSS動畫相關的規則和事件，對CSS動畫的動態控制和監聽。

• CSSRule介面，在CSSRule介面中新增了兩種規則類型，用於識別新的關鍵幀和關鍵幀(keyframes)規則。

• CSSKeyframeRule介面，CSSKeyframeRule介面代表單個關鍵幀的樣式規則。它包括keyText屬性，表示關鍵幀選擇器，以及style屬性，返回關鍵幀的CSS樣式規則。

• CSSKeyframesRule介面(跟上面的CSSKeyframeRule差了一個s別搞混喔～) 代表了單個動畫的完整關鍵幀集合。它包括name、cssRules和length等屬性，允許訪問關鍵幀列表。此外，還有appendRule、deleteRule和findRule等方法，用於操作關鍵幀規則。

• 事件處理程序，對於HTML元素、文檔對象和窗口對象，介面擴展了GlobalEventHandlers接口混入，以添加處理CSS動畫事件的事件處理程序IDL屬性，包括animationstart、animationiteration、animationend和animationcancel。

第六章，Privacy Considerations

目前並沒有東西，顯示狀態為：

• No privacy concerns have been reported on this specification

第七章，Security Considerations

目前並沒有東西，顯示狀態為：

• No security concerns have been reported on this specification.

第八章，Changes

則是關於本版規範(2023年3月Working Draft)，與2018年10月Working Draft版，改變了什麼？

• Changes since the Working Draft of 11 October 2018
• 兩版都是處在第二階段的Working Draft，這樣算算也過了快五年才有下一版！

第九章，Acknowledgements致謝

感謝致力於制定規範的委員們！在此，也一起感謝他們吧，讓網路世界更美好!

第十章，Other open issues其他未解問題

像是問題集，當下看的只有一條Issue 2 Need to specify how keyframes interact.

第十一章，Working Group Resolutions that are pending editing

• 像是編撰小組的會議紀錄啦，關於『待決議事件』，有提醒是本節內容僅供參考，且是臨時性的，有興趣的朋友可以來看看！
• 可以看出他們都『怎樣討論』出來這些規範，很多都是來自四面八方的網友提出問題，小組針對此問題，作出討論與回覆等。

小結

看過規範是不是頭暈暈呢？沒關係，這很正常，我看完還是問號很多，得搭配實作來一起理解！更多操作範例請參考MDN CSS animations